<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<script src="../js/jquery-1.11.1(1).js"></script>
		<!-- 元素遍历， 用于DOM树中遍历元素    【理解：针对元素嵌套，父子级】
		 children（）       功能：获取匹配元素集合中每个元素的子元素
		 parent（）         功能：获取匹配元素集合中每个元素的父元素
		 
		 siblings（）       功能：获取匹配元素集合中每个元素的所有兄弟元素
		 
		 next（）           功能：获取匹配元素集合中每个元素的下一个兄弟元素
		 prev()             功能：获取匹配元素集合中每个元素的上一个兄弟元素
		 
		 each()             功能：遍历匹配元素的集合----遍历所有子元素
		                    语法糖：each（function(index,element){
								$(element).text(`${index}`)
								注意：打印遍历的值；不可使用单双引号+拼接
								功能：获取到的元素，遍历元素内容
							}）    
								index  下标    element  元素  形参
		 -->
		 <style>
			 .container{
				 border: 1px solid palevioletred;
				 margin: 10px;
				 padding: 10px;
			 }
			 .box{
				 background: #aaaaff;
				 margin: 10px;
				 padding: 10px;
			 }
			 button{
				 margin: 10px;
				 cursor: pointer;
				 padding: 10px 15px;
			 }
		 </style>
	</head>
	<body>
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
	     <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="loop">遍历元素</button>
		 <script>
			 /* 1.点击  获取子元素  按钮  实现.container下所有子元素添加背景色*/
			 $("#gc").click(function(){
				 //通过 父找子  函数 --添加效果
				 $(".container").children().css("background-color","#aaffff");	 
			 });
			 /* 2.点击 获取父元素  实现.container  添加背景色*/
			 $("#gp").click(function(){
			 				 //通过 父找子  函数 --添加效果
			 				 $(".container").parent().css("background-color","#aaff7f");	 
			 });
			 /* 3.点击  获取兄弟元素   按钮   实现除了  #box4 字体颜色不变  其他变色*/
			 $("#gs").click(function(){
			 				 //通过 父找子  函数 --添加效果
			 				 $("#box4").siblings().css("background-color","#aaffff");	 
			 });
			 /* 4.点击  获取下一个兄弟元素  按钮 实现#box4  下一个兄弟，添加背景色*/
			 $("#gn").click(function(){
			 				 //通过 父找子  函数 --添加效果
			 				 $("#box4").next().css("background-color","#aaffff");	 
			 });
			 /* 5.点击  获取上一个兄弟元素  按钮 实现#box6 上一个兄弟，添加效果
			                                      圆，背景图，背景色，盒子阴影
			 */
			$("#gr").click(function(){
							 //通过 父找子  函数 --添加效果
							 $("#box6").prev().css({"background-color":"#ffaa7f",
							                        "height":"300px",
													"width":"300px",
													"box-shadow":"5px 5px 10px 2px rgba(0,0,0,0.5)",
													"border-radius":"50%",
													"background-image":"url(../img/1.gif)",
													"background-size":"100%",
													"font-size":"0"
							 });	 
			});
			
			/* 6.点击   遍历元素   按钮   实现每个盒子上，这是第几个盒子 */
			$("#loop").click(function(){
				//通过 .box 抓到6个元素【一组集合】
				$(".box").each(function(i,e){  //e 代表6个元素    i代表下标
					//每个盒子加文字：这是第几个盒子
					$(e).text(`这是第${i+1}盒子`);
				});
			});
			
		 </script>
	</body>
</html>